﻿{% load static %}
<!doctype html>
<html>
<link rel="shortcut icon" href='{% static "images/airbottle.ico" %}' type="image/x-icon" />

<head>
    <meta charset="utf-8">
    <title>气体智慧运营</title>
    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <link rel="stylesheet" href='{% static "css/comon0.css" %}'>
</head>
<script type="text/javascript">
	$(document).ready(function(){
		var html=$(".wrap ul").html()
		$(".wrap ul").append(html)
		var ls=$(".wrap li").length/2+1
		i=0
		ref = setInterval(function(){
			i++
			if(i==ls){
				i=1
				$(".wrap ul").css({marginTop:0})
				$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
			}
	    	$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)


		},2400);



				var html2=$(".adduser ul").html()
		$(".adduser ul").append(html2)
		var ls2=$(".adduser li").length/2+1
		a=0
		ref = setInterval(function(){
			a++
			if(a==ls2){
				a=1
				$(".adduser ul").css({marginTop:0})
				$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
			}
	    	$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)


		},4300);








	})
</script>

<body>
    <div class="loading">
        <div class="loadbox"> <img src='{% static "images/loading.gif" %}'> 页面加载中... </div>
    </div>
    <div class="head">
        <h1><img src='{% static "images/logo.png" %}'><a href="/show">气体智慧运营</a></h1>
        <div class="weather" >
            <span>中法新城同济医院</span>
                        <span id="time">
            <script language="javascript">
            setInterval("time.innerHTML=new Date().toLocaleString()",1000);
            </script></span>
    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 2.7rem">
                    <div class="alltitle">数据面板</div>

                    <div class="sycm">
                        <ul class="clearfix">
                            <li><h2>{{ bottle_O2_num }}</h2><span>氧气数量</span></li>
                            <li><h2>{{ bottle_40_num }}</h2><span>40L氧气</span></li>
                            <li><h2>{{ bottle_10_num }}</h2><span>10L氧气</span></li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="clearfix">
                            <li><h2>{{ bottle_CO2_num }}</h2><span>二氧化碳</span></li>
                            <li><h2>{{ bottle_N2_num }}</h2><span>氮气</span></li>
                            <li><h2>16</h2><span>笑气</span></li>
                        </ul>


                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2.65rem">
                    <div class="alltitle">空满气体占比</div>
                    <div class="sy" id="echarts1"></div>
                    <div class="sy" id="echarts2"></div>
                    <div class="sy" id="echarts3"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2.95rem">
                    <div class="alltitle">科室库存数据</div>
                    <div id="echarts4" style="height: 2.2rem; width: 100%;"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter">{{ bottle_num }}</li>
                            <li class="pulll_left counter">{{ log_num }}</li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">气体录入总量</li>
                            <li class="pulll_left">气体配送总量</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"><img src='{% static "images/lbx.png" %}'></div>
                    <div class="map2"><img src='{% static "images/jt.png" %}'></div>
                    <div class="map3"><img src='{% static "images/map.png" %}'></div>

                    <div class="map4" id="main"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:5.2rem">
                    <div class="alltitle">库存气体规格</div>
                    <div class="tabs">
                        <ul class="clearfix">
                            <li><a  href="#"> </a></li>
                            <li><a href="#"> </a></li>
                            <li><a href="#"> </a></li>
                        </ul>
                    </div>
                    <div class="clearfix">
                        <div class="sy" id="echarts6"></div>
                        <div class="sy" id="echarts7"></div>
                        <div class="sy" id="echarts8"></div>
                    </div>
                    <div class="addnew">
                        <div class="tit02"><span>新增气体列表</span></div>
                        <div class="adduser">
                            <ul class="clearfix">
                                {% for each in new_bottle %}
                                <li class="clearfix"> <span class="pulll_left">新增气体信息:</span> <span class="pulll_right">{{ each.type }} - {{ each.state }} - {{ each.size }} - {{ each.loc }} </span> </li>
                                {% endfor %}

                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.4rem">
                    <div class="alltitle">实时配送记录</div>
                    <div class="wrap">
                        <ul>
                            {% for each in new_log %}
                            <li>
                                <p>{{each.date}} - {{each.person}}-{{each.bottle}}-{{each.state}}-{{each.loc}}</p>
                            </li>
                            {% endfor %}

                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>

    </div>
    <div class="back"></div>
    <script language="JavaScript" src='{% static "js/js.js" %}'></script>
    <script type="text/javascript" src='{% static "js/echarts.min.js" %}'></script>
    <script type="text/javascript" src='{% static "js/china.js" %}'></script>
    <script type="text/javascript" src='{% static "js/area_echarts.js" %}'></script>
    <script type="text/javascript">
        $(document).ready(function () {
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
        })
        window.addEventListener("resize", function () {
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
        });
    </script>





    <script type="text/javascript">
        var v1 = {{ bottle_40_num }};
        var v2 = {{ bottle_10_num }};
        var v3 = v1 + v2;



        var myChart6 = echarts.init(document.getElementById('echarts6'));

        option6 = {


            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#0088cc',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '气瓶总数',
                    label: {
                        normal: {
                            formatter: v3 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },
                ]
            }]
        };


        var myChart7 = echarts.init(document.getElementById('echarts7'));

        option7 = {


            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '满瓶',
                    label: {
                        normal: {
                            formatter: v1 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v2,
                    name: '空瓶',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v1 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };


        var myChart8 = echarts.init(document.getElementById('echarts8'));

        option8 = {


            series: [{

                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '空瓶',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v1,
                    name: '满瓶',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v2 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };

        setTimeout(function () {
            myChart6.setOption(option6);
            myChart7.setOption(option7);
            myChart8.setOption(option8);
        }, 500);

    </script>
    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('echarts1'));
        var v1 = {{ bottle_Man }};
        var v2 = {{ bottle_Kong }};
        var v3 = v1 + v2;
        option1 = {


            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#0088cc',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '气瓶总数',
                    label: {
                        normal: {
                            formatter: v3 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },
                ]
            }]
        };


        var myChart3 = echarts.init(document.getElementById('echarts3'));
        var v1 = {{ bottle_Man }};
        var v2 = {{ bottle_Kong }};
        var v3 = v1 + v2;
        option2 = {


            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '满瓶',
                    label: {
                        normal: {
                            formatter: v1 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v2,
                    name: '空瓶',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v1 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };


        var myChart2 = echarts.init(document.getElementById('echarts2'));
        option3 = {


            series: [{

                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '空瓶',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v1,
                    name: '满瓶',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v2 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        setTimeout(function () {
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
        }, 500);

    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('echarts4'));
        var myChart = echarts.init(document.getElementById('echarts4'));


option = {
//  backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
    type: 'shadow'
}
},
grid: {
left: '0%',
top:'10px',
right: '0%',
bottom: '4%',
containLabel: true
},
xAxis: [{
type: 'category',
    data: {{ kucun_name|safe }},
<!--模板加“ |safe ”-->
axisLine: {
    show: true,
lineStyle: {
        color: "rgba(255,255,255,.1)",
        width: 1,
        type: "solid"
    },
},

axisTick: {
    show: false,
},
axisLabel:  {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
        },
    },
}],
yAxis: [{
type: 'value',
axisLabel: {
    //formatter: '{value} %'
    show:true,
    textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: '12',
        },
},
axisTick: {
    show: false,
},
axisLine: {
    show: true,
    lineStyle: {
        color: "rgba(255,255,255,.1	)",
        width: 1,
        type: "solid"
    },
},
splitLine: {
    lineStyle: {
        color: "rgba(255,255,255,.1)",
    }
}
}],
series: [
{
type: 'bar',
data: {{ kucun_num }},
barWidth:'35%', //柱子宽度
// barGap: 1, //柱子之间间距
itemStyle: {
    normal: {
        color:'#2f89cf',
        opacity: 1,
        barBorderRadius: 5,
    }
}
}

]
};

// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// window.addEventListener("resize",function(){
//     myChart.resize();
// });
myChart.setOption(option);
$(document).ready(function () {
    myChart.resize();

})
window.addEventListener("resize", function () {
    myChart.resize();
});

</script>


    </script>
    <script type="text/javascript" src='{% static "js/jquery.waypoints.min.js" %}'></script>
    <script type="text/javascript" src='{% static "js/jquery.countup.min.js" %}'></script>
    <script type="text/javascript">
        $('.counter').countUp();
    </script>



</body>
</html>
